y/*
 * @Description: 订单详情
 * @Author: buwei.huang
 * @Date: 2019-07-10 10:30:32
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-07-11 11:28:04
 */
<template>
  <div class="or_detail">
    <order-from-item
      labelName="预约单号"
      :data="dataInfo.orderNo"
    />
    <order-from-item
      labelName="出发地点"
      :data="dataInfo.startPoint ? dataInfo.startPoint.address : ''"
    />
    <template v-for="(item,index) in dataInfo.passbyPointList">
      <order-from-item
        labelName="停靠地点"
        :data="item.address"
        :key="'passbyPoint' + index"
      />
    </template>
    <order-from-item
      labelName="目的地"
      :data="dataInfo.endPoint ? dataInfo.endPoint.address : ''"
    />
    <order-from-item
      labelName="出发时间"
      :data="dataInfo.startTime | timeFormat"
    />
    <order-from-item
      labelName="结束时间"
      :data="dataInfo.endTime | timeFormat"
    />
    <order-from-item
      labelName="乘车人数"
      :data="dataInfo.passengerNum ? dataInfo.passengerNum + '人' : ''"
    />
    <order-from-item
      labelName="预约车辆数"
      :data="dataInfo.reservationCarNum ? dataInfo.reservationCarNum + '辆' : ''"
    />
    <order-from-item
      labelName="联系人"
      :data="dataInfo.contact"
    />
    <order-from-item
      labelName="联系方式"
      :data="dataInfo.contactPhone"
    />
    <order-from-item
      labelName="创建时间"
      :data="dataInfo.createTime | timeFormat(1)"
    />
  </div>
</template>
<script>
import OrderFromItem from './OrderFromItem'
import { dateFtt } from 'vue-xiaobu-utils'
export default {
  components: {
    'order-from-item': OrderFromItem
  },
  props: {
    dataInfo: {
      type: Object,
      default: null
    }
  },
  filters: {
    timeFormat(timestamp, type) {
      if (timestamp) {
        let date = new Date(timestamp)
        let dateArr = dateFtt('yyyy-MM-dd', date).split('-')
        let dateStr = dateArr[0] + '年' + dateArr[1] + '月' + dateArr[2] + '日'
        let hourStr = dateFtt('hh:mm', date)
        if (type) {
          hourStr = dateFtt('hh:mm:ss', date)
        }
        return dateStr + ' ' + hourStr
      } else {
        return ''
      }
    }
  }
}
</script>
<style>
.or_detail {
  margin: 12px 32px 32px;
  background-color: #fff;
  border-radius: 16px;
  padding: 20px 0 32px;
  box-sizing: border-box;
  box-shadow: 0px 5px 10px 10px rgb(51, 51, 51, 0.05);
}
.or_detail_btns {
  padding: 64px;
}
.or_detail_btn {
  width: 240px;
  height: 72px;
  border-radius: 36px;
  font-size: 16px; /* no */
}
.or_detail_btns .btn_left {
  background-color: #fff;
}
.isBtnStatePadding {
  padding: 64px 32px;
}
.isBtnStateTopPadding {
  padding: 42px 32px 64px;
}
.or_detail_btns .btn_right {
  border: 0;
  color: #fff;
}
.or_detail_btns .isBtnStateWidth {
  width: 100%;
}
.or_more {
  font-size: 16px; /* no */
  line-height: 44px;
  color: #666;
  text-align: center;
  margin-top: 10px;
}
</style>
